<template>
  <view class="page-container">
    
    <!-- 填写提示信息 -->
    <view class="tips-container">
      <view class="tips-icon">
        <uni-icons type="info-filled" size="36rpx" color="#ff9900"></uni-icons>
      </view>
      <view class="tips-content">
        <text class="tips-title">请填写物流信息</text>
        <text class="tips-desc">请确认已将商品寄回商家后，再填写以下物流信息</text>
      </view>
    </view>
    
    <!-- 表单内容 -->
    <view class="form-container">
      <view class="form-item">
        <text class="item-label">配送方式</text>
        <view class="item-content" @click="show = true">
          <text class="item-value">{{ form.logisticsCompany || '请选择物流公司' }}</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <view class="form-item">
        <text class="item-label">物流单号</text>
        <view class="item-content">
          <input 
            class="input-field" 
            v-model="form.logisticsOrderNo" 
            placeholder="请输入物流单号" 
            placeholder-style="color: #999;"
          />
        </view>
      </view>
    </view>
    
    <!-- 底部提示 -->
    <view class="bottom-tips">
      <uni-icons type="info" size="24rpx" color="#999"></uni-icons>
      <text class="tips-text">请确保填写的物流单号正确，以便商家查询物流信息</text>
    </view>
    
    <!-- 提交按钮 -->
    <button class="submit-btn" @click="submit">提交</button>
    
    <!-- 配送方式选择器 -->
    <up-picker 
      :show="show" 
      :columns="columns" 
      @confirm="handleConfirm" 
      @cancel="show=false"
    ></up-picker>
  </view>
</template>

<script>
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {getRefund, handleUpdateLogistics} from "@/api/sell/refund";

export default {
  components: {UniIcons},
  data() {
    return {
      show: false,
      form: {
        id: null,
        logisticsCompany: null,
        logisticsOrderNo: null,
      },
      columns: [
        [
          '自配送',
          '顺丰速运',
          '百世快递',
          '圆通速递',
          '韵达快递',
          '申通快递',
          '中通速递',
          '极兔速递',
          '邮政快递',
          '京东物流',]
      ]
    }
  },
  onLoad(option) {
    uni.showLoading({
      title: '加载中...',
      mask: true
    });
    
    getRefund(option.refundId).then(res => {
      this.form.id = res.data.id
      this.form.logisticsCompany = res.data.logisticsCompany
      this.form.logisticsOrderNo = res.data.logisticsOrderNo
      uni.hideLoading();
    }).catch(err => {
      uni.hideLoading();
      uni.showToast({
        title: '加载失败，请重试',
        icon: 'none'
      });
    });
  },
  methods: {
    handleConfirm({value}) {
      this.form.logisticsCompany = value[0];
      this.show = false;
    },
    submit() {
      if (!this.form.logisticsCompany) {
        uni.showToast({
          title: '请选择物流公司',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      if (!this.form.logisticsOrderNo) {
        uni.showToast({
          title: '请输入物流单号',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      uni.showLoading({
        title: '提交中...',
        mask: true
      });
      
      handleUpdateLogistics(this.form).then(res => {
        uni.hideLoading();
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 2000
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }).catch(err => {
        uni.hideLoading();
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none',
          duration: 2000
        });
      });
    },
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #fff;
  min-height: 100vh;
}

.page-container {
  padding-bottom: 40rpx;
}

/* 顶部导航栏 */
.nav-header {
  display: flex;
  align-items: center;
  height: 90rpx;
  position: relative;
  padding: 0 30rpx;
  
  .back-btn {
    position: absolute;
    left: 30rpx;
    height: 90rpx;
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  .page-title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    color: #333;
  }
}

/* 提示信息区域 */
.tips-container {
  display: flex;
  margin: 20rpx 30rpx 40rpx;
  padding: 24rpx;
  background-color: #FFF9F2;
  border-radius: 12rpx;
  
  .tips-icon {
    margin-right: 16rpx;
    margin-top: 4rpx;
  }
  
  .tips-content {
    flex: 1;
    
    .tips-title {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #FF9900;
      margin-bottom: 8rpx;
    }
    
    .tips-desc {
      display: block;
      font-size: 24rpx;
      color: #FF9900;
      opacity: 0.9;
      line-height: 1.5;
    }
  }
}

/* 表单区域 */
.form-container {
  margin: 0 30rpx;
  background: #fff;
  
  .form-item {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 1px solid #F5F5F5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-label {
      width: 160rpx;
      font-size: 28rpx;
      color: #666;
      flex-shrink: 0;
    }
    
    .item-content {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .item-value {
        font-size: 28rpx;
        color: #333;
        
        &:empty::before {
          content: '请选择物流公司';
          color: #999;
        }
      }
      
      .input-field {
        width: 100%;
        height: 60rpx;
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

/* 底部提示 */
.bottom-tips {
  display: flex;
  align-items: center;
  margin: 30rpx 30rpx 60rpx;
  
  .uni-icons {
    margin-right: 10rpx;
    margin-top: 4rpx;
  }
  
  .tips-text {
    flex: 1;
    font-size: 24rpx;
    color: #999;
    line-height: 1.5;
  }
}

/* 提交按钮 */
.submit-btn {
  width: calc(100% - 60rpx);
  height: 90rpx;
  line-height: 90rpx;
  margin: 0 auto;
  background: #E84D1C;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  
  &:after {
    border: none;
  }
  
  &:active {
    opacity: 0.9;
  }
}
</style>

